<ng-template #default let-item>
  <li class="border-primary border-2 px-4 py-2 capitalize">
    {{ item.name }}
  </li>
</ng-template>

<ul class="space-y-4 flex flex-col">
  <ng-container
    *ngFor="let item of items"
    [ngTemplateOutlet]="listTemplate || default"
    [ngTemplateOutletContext]="{ $implicit: item }"
  ></ng-container>

  <!-- 
  <section>
    <li
      class="relative flex justify-between gap-x-6 py-5"
      *ngFor="let item of items"
    >
      <div class="flex gap-x-4">
        <img
          class="h-12 w-12 flex-none rounded-full bg-gray-50"
          src="assets/{{ item.name }}.jpg"
          alt=""
        />
        <div class="min-w-0 flex-auto">
          <p class="text-sm font-semibold leading-6 text-gray-900">
            <a href="#" class="capitalize">
              <span class="absolute inset-x-0 -top-px bottom-0"></span>
              {{ item.name }}
            </a>
          </p>
          <p class="mt-1 flex text-xs leading-5 text-gray-500">
            {{ item.description }}
          </p>
        </div>
      </div>
      <div class="flex items-center gap-x-4">
        <div class="hidden sm:flex sm:flex-col sm:items-end">
          <p class="mt-1 text-xs leading-5 text-gray-500">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="w-6 h-6"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"
              />
            </svg>
          </p>
        </div>
      </div>
    </li>
  </section> -->
</ul>
